<template>
	<view class="container">
		<TopNav></TopNav>
		<view class="flex flex-direction">
			<text class="f-w600 f-s30 line-height42">更换接单号码</text>
			<text class="text-gray f-w400 f-s14 line-height20 m-t16">请输入您新的接单手机号码</text>
		</view>
		<view class="ipt flex align-center">
			<view class="">
				<text class="text-bold" style="padding-right: 20rpx;">+86</text>
				<image src="/static/images/login/arrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
			</view>
			<view class="" style="width: 2rpx;height: 46rpx;border: 1rpx solid #DDE0E6;margin: 0 34rpx 0 20rpx;">

			</view>
			<input type="number" maxlength="11" placeholder="输入手机号" v-model="form.phonenumber">
		</view>
		<view class="self-btn full-width m-t30" hover-class="pressed" @click="handleToPage">
			<text>发送验证码</text>
		</view>
	</view>
</template>

<script>
	import {
		getCode
	} from '@/api/login'
	export default {
		data() {
			return {
				form: {
					phonenumber: ''
				}
			};
		},
		onShow() {

		},
		methods: {
			handleToPage() {
				this.$modal.loading("发送中").then(() => {
					getCode().then(res => {
						this.$modal.closeLoading()
						this.$tab.navigateTo("./update-phone/code?phonenumber=" + this.form.phonenumber)
					}).catch(() => this.$modal.closeLoading())
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		padding: 60rpx;
		box-sizing: border-box;

		.ipt {
			width: 630rpx;
			height: 96rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			border: 1rpx solid #DDE0E6;
			margin-top: 132rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				// margin-right: 20rpx;
			}

			input {
				flex: 1;
				caret-color: #FE3F59; //css3属性
				caret-width: 5px;
			}
		}
	}
</style>